<div id="vue-app">
  <header>
    <ppz-nav></ppz-nav>
    <div class="operations">
      <div class="btns">
        <icon-btn iid="light" @click="refresh" title="刷新"></icon-btn>
        <icon-btn iid="search" @click="$refs.searchDialog.showModal()" title="搜索"></icon-btn>
        <dialog class="search" ref="searchDialog">
          <div class="modal"></div>
          <div class="title">搜索数据</div>
          <div class="body">
            <search-item
              v-for="(item, index) in selectParams.search"
              :fields="fields"
              v-model:field="item.field"
              v-model:operator="item.operator"
              v-model:value="item.value"
              @destroy="selectParams.search.splice(index, 1)"
              ></search-item>
            <icon-btn iid="add" class="round" @click="addSearch"></icon-btn>
          </div>
          <div class="btns">
            <button @click="search">搜索</button>
            <button @click="emptySearch">清空</button>
            <button @click="$refs.searchDialog.close()">关闭</button>
          </div>
        </dialog>
        <icon-btn iid="filter" @click="$refs.fieldSelector.showModal()" title="字段选择"></icon-btn>
        <dialog class="field" ref="fieldSelector">
          <div class="modal"></div>
          <div class="title">字段选择</div>
          <div class="body">
            <ppz-checkbox v-for="f in fields" v-model="f.show" :label="f.name"></ppz-checkbox>
          </div>
          <div class="btns">
            <button @click="select1()">全选</button>
            <button @click="select_1">反选</button>
            <button @click="select0">全不选</button>
            <button @click="$refs.fieldSelector.close()">关闭</button>
          </div>
        </dialog>
        <icon-btn iid="add" @click="newRecord()" title="插入"></icon-btn>
        <icon-btn iid="copy" @click="newRecord(true)" title="拷贝"
          :disabled="!pneOptions || pneOptions.focus.y === undefined"></icon-btn>
        <icon-btn iid="save" @click="save" title="保存"
          :disabled="!hasPK || !isEditing"></icon-btn>
        <icon-btn iid="undo" @click="undo" title="撤销全部"
          :disabled="!hasPK || !isEditing"></icon-btn>
        <icon-btn iid="delete" @click="drop" title="删除"
          :disabled="!hasPK || pneOptions.focus.y === undefined"></icon-btn>
        <icon-btn iid="sql" @click="checkSQL" title="查看当前 sql"></icon-btn>
        <dialog ref="sqlViewer" class="sql">
          <div class="modal"></div>
          <div class="title">查看 SQL</div>
          <div class="body">
            <p>{{sql.clause}}</p>
            <radio-group
              v-model="sql.noPagination"
              @update:model-value="checkSQL"
              :list="[{ label: '带分页', value: false }, { label: '不带', value: true }]"
              ></radio-group>
          </div>
          <div class="btns">
            <button @click="openFileWithSQL">在新文件中打开</button>
            <button @click="writeClipboard">复制到剪切板</button>
            <button @click="openTerminalWithSQL">在终端中打开</button>
            <button @click="$refs.sqlViewer.close()">关闭</button>
          </div>
        </dialog>
        <icon-btn iid="terminal" @click="terminal" title="打开终端"></icon-btn>
      </div>
      <ppz-pagination :count="selectParams.page.count"
        @click.capture="beforePage"
        v-model:index="selectParams.page.index"
        v-model:size="selectParams.page.size"
        @change="putData"
        ></ppz-pagination>
    </div>
  </header>
  <div class="table-wrapper">
    <ppz-pne :fields="fields" :records="records" :options="pneOptions"
      :editable="hasPK"
      @sort="putData"
      ></ppz-pne>
  </div>
</div>